<template>
  <div>
    <el-badge 
      v-for="item in randomSize" 
      :key="item" :value="fill(item)" 
      :type="item==index+1?'primary':'info'"  
      class="item"
      @click.native="gotoIndex(item-1)"
      >
    </el-badge>
  </div>
</template>

<script>
// import { fill } from "../../utils/index";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      total: 30,
      current: 1
    };
  },
  methods: {
    ...mapMutations("test", ["SET_INDEX"]),
    gotoIndex(index) {
      this.SET_INDEX(index);
    },
    fill(num) {
      return num < 10 ? "0" + num : num;
    }
  },
  computed: {
    ...mapState("test", ["index", "randomSize"])
  }
};
</script>

<style scoped>
.el-badge {
  cursor: pointer;
}
</style>